Skip to content

Normalize & document icon usage, and move design documents into storybook #2597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jun 10, 2025

Conversation

emma-sg
Copy link
Member

@emma-sg emma-sg commented May 8, 2025

Prerequisite for #2652

This PR is the result of investigating our usage of icons and colors across the app. This investigation is document in the first table “In Use (as of 2025-05-06)” on the Status Indicators page in Storybook, included as a screenshot below.

In Use (as of 2025-05-06)
Screen Shot 2025-05-08 at 17 39 50

I've then consolidated these uses with the previous version of the Status Icons document that @Shrinks99 wrote into a new Intended Implementation table, as seen below.

Intended Implementation
Screen Shot 2025-05-08 at 17 42 14

Finally, I updated icons across the app in places that were using different icons for the same meanings. Certain places (e.g. the superadmin org list) deviate from these norms, but I think this is okay — that implementation in particular is quite information-dense, so using a wider variety of icons and colors there works.

Finally finally, I moved both design docs from the public docs page into Storybook, as these more internally-facing design docs aren't particularly useful to end users.

Changes

  • Updates status icons & colors in several places in the app
  • Moves "Action Menus" and updated "Status Indicators" design docs from public docs to Storybook
    • [Storybook] Adds remark-gfm to enable tables in MDX
    • [Storybook] Adds a custom ColorSwatch block
    • [Browsertrix Docs] Swaps out custom colors and fonts included with docs for color variables from Hickory and Webrecorder CDN's hosted font files, respectively

Screenshots

[working on it]

Copy link

socket-security bot commented May 8, 2025

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License

View full report

@SuaYoo
Copy link
Member

SuaYoo commented May 28, 2025

Can we split this into 2 parts? Moving design docs to storybook, and then doing a consistency pass once pause/resume is merged in?

@SuaYoo SuaYoo force-pushed the improve-status-docs branch 2 times, most recently from 9170829 to adef47c Compare June 9, 2025 19:05
@SuaYoo SuaYoo force-pushed the improve-status-docs branch from adef47c to 8088ba5 Compare June 9, 2025 19:09
@SuaYoo SuaYoo marked this pull request as ready for review June 9, 2025 19:10
@SuaYoo SuaYoo merged commit 86c4d32 into main Jun 10, 2025
27 checks passed
@SuaYoo SuaYoo deleted the improve-status-docs branch June 10, 2025 17:58
@SuaYoo SuaYoo restored the improve-status-docs branch June 10, 2025 17:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants